import styled from "styled-components";

export const ImgBoxStyle = styled.div`
  .playlist-box {
    position: relative;
    height: 140px;
    width: 140px;
    .msk {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: 0 0;
    }
    .msk-bottom {
      width: 100%;
      height: 27px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-position: 0 -537px;
      color: #ccc;
      :after {
        content: "";
        display: block;
        clear: both;
        overflow: hidden;
      }
      .msk-play {
        position: absolute;
        right: 10px;
        bottom: 5px;
        width: 16px;
        height: 17px;
        background: url(${require("@/assets/img/iconall.png").default});
        background-position: 0 0;
      }
      .msk-icon-headset {
        width: 14px;
        height: 11px;
        margin: 9px 5px 9px 10px;
        background: url(${require("@/assets/img/iconall.png").default});
        background-position: 0 -24px;
      }
      .msk-nb {
        margin: 7px 0 0 0;
      }
    }
    ::after {
      content: "";
      clear: both;
      display: block;
      overflow: hidden;
    }
  }
`;
